/**
 * DOM 操作封装
 */
const https = require("../utils/https.js")
function ready(callback) {
  window.addEventListener("DOMContentLoaded", callback)
}
function getEle(selector) {
  return document.querySelector(selector)
}
function getEles(selector) {
  return document.querySelectorAll(selector)
}
function addEvent(obj, callback, type = "click") {
  getEle(obj).addEventListener(type, callback)
}

function tMenu(obj) {
  document.body.innerHTML += `
  <div class="head mt20 p30">
  <ul class="df tac f18 jcb p30 h50">
    <li><a href="courseRun.html" class="${obj == 'courseRun' ? 'active' : ''}">跑步</a></li>
    <li><a href="courseRide.html" class="${obj == 'courseRide' ? 'active' : ''}">骑行</a></li>
    <li><a href="courseList.html" class="${obj == 'courseList' ? 'active' : ''}">课程训练</a></li>
  </ul>
  </div>
  `
}

function bMenu(obj) {
  //js实现底部原理
  document.body.innerHTML += `
  <footer>
  <ul class="df tac f12">
    <li><a href="home.html" class="${obj == 'home' ? 'active' : ''}"><i class="iconfont icon-home"></i><span>首页</span></a></li>
    <li><a href="courseRun.html" class="${obj == 'courseRun' ? 'active' : ''}"><i class="iconfont icon-sport"></i><span>运动</span></a></li>
    <li><a href="circle.html" class="${obj == 'circle' ? 'active' : ''}"><i class="iconfont icon-circle"></i><span>圈子</span></a></li>
    <li><a href="mine.html" class="${obj == 'mine' ? 'active' : ''}"><i class="iconfont icon-mine"></i><span>我的</span></a></li>
  </ul>
</footer>
  `
}
function file(url, dom, callback) {
  let files = getEle(dom).files[0]
  let fd = new FormData()
  fd.append("file", files)
  https.post(url, fd, callback)
}

function zeroize(val) {
  return val = val < 10 ? "0" + val : val
}
module.exports = {
  ready,
  getEle,
  getEles,
  addEvent,
  bMenu,
  file,
  zeroize,
  tMenu
}